<template>
  <view>
    <!-- 竖向排列 row  -->
    <view
      class="_goods-detail"
      @click="handleClickDetail(detail)"
    >
      <view class="_goods-img" :style="{'height': picHeight+'px'}">
        <x-image :src="formatOss(detail.imageUrl || detail.illustrationUrl)" mode="widthFix" />
      </view>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import navigateTo from '@/utils/x-navigate';

export default {
  name: 'XGoodsSpecialItem',
  components: {
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    },
    sourcePageType: {
      type: [String, Object],
      default: ''
    },
    sourcePageId: {
      type: [String, Object],
      default: ''
    },
    source: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      picHeight: '',
      ratio: null
    };
  },
  created() {
    const windowInfo = wx.getWindowInfo();
    this.ratio = (375 / windowInfo.windowWidth);
    this.picHeight = 171 * this.detail.mainPicHeight / this.detail.mainPicWidth / this.ratio;
  },
  mounted() {
    this.setHeight();
  },
  methods: {
    handleClickDetail(item) {
      navigateTo(item, {
        sourcePageType: this.sourcePageType,
        sourcePageId: this.sourcePageId,
        source: this.source
      });
    },
    numberFormat(val) {
      return this.$tools.numberFormat(val);
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 300);
    },
    onDetail(item) {
      console.log(item);
      if (item.specialType === 0) {
        const productId = JSON.parse(item.specialParam).productId;
        uni.navigateTo({
          url: `/pages/transit-product/index?productId=${productId}`
        });
      } else if (item.specialType === 1) {
        uni.navigateTo({
          url: '/packages/coupon/coupon-centre/index'
        });
      } else if (item.specialType === 2) {
        uni.navigateTo({
          url: '/packages/activity/subsidy/list'
        });
      } else if (item.specialType === 3) {
        // const id = JSON.parse(item.specialParam).levelSecondCategoryId;
        uni.navigateTo({
          url: '/packages/ranking/index/index'
        });
      } else if (item.specialType === 4) {
        const storeId = JSON.parse(item.specialParam).storeId;
        uni.navigateTo({
          url: `/packages/store/index?storeId=${storeId}`
        });
      } else if (item.specialType === 5) {
        uni.navigateTo({
          url: '/packages/activity/source-factory/index'
        });
      } else {
        // 不做任何处理
      }
    },
    setHeight() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('._goods-detail').boundingClientRect(data => {
          if (data) {
            this.$emit('mounted', data.height + 8 / this.ratio, this.detail);
          }
        }).exec();
      });
    }
  }
};
</script>

<style lang="scss">
._goods-detail {
  box-sizing: border-box;
  width: 343px;
  // min-height: 540px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;

  ._goods-img {
    flex-shrink: 0;
    position: relative;
    width: 343px;
    //height: 343px;
    background: #FFE4E4;

    ._tips {
      position: absolute;
      top: 0px;
      left: 0;
      min-width: 120px;
      height: 44px;
      line-height: 44px;
      font-size: 24px;
      padding: 0 12px;
      text-align: center;
      color: #fff;
      background: linear-gradient(270deg, #FF2725 0%, #FF761C 100%);
      border-radius: 0px 50px 50px 0px;
    }
    ._tips-history{
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      min-width: 200px;
      height: 42px;
      line-height: 42px;
      font-size: 28px;
      text-align: center;
      color: #fff;
      background: #DE3A2E;
      border-radius: 6px;
    }
  }

  ._goods-title {
    background-image: cdn('/images/bg-special.png');
    background-size: 100%;
    padding: 20px;
    ._indent2 {
      flex: 1;
      font-size: 32px;
      font-weight: bold;
      line-height: 1.6;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      color: #B44634;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }

    ._indent1 {
      //width: 100%;
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      background: linear-gradient(270deg, #FF755F 0%, #FF8C7E 100%);
      border-radius: 100px;
      margin-top: 20px;
      padding: 0 16px;
      color: #FFFFFF;
      font-size: 26px;
      height: 50px;
      line-height: 50px;
      font-weight: normal;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    ._block1{
      width: 160px;
      display: flex;
      background: #F1E9FF;
      border-radius: 6px;
      margin-top: 18px;
      padding: 0 12px;
      color: #8958DF;
      font-size: 26px;
      height: 50px;
      line-height: 50px;
      ._text{
        margin-right: 10px;
      }
    }
    ._block2{
      display: flex;
      background: #FFF3DA;
      border-radius: 6px;
      margin-top: 18px;
      padding: 0 12px;
      color: #ED6A0C;
      font-size: 26px;
      height: 50px;
      line-height: 50px;
      ._text{
        flex: 1;
      }
      ._icon{
        float: right;
      }
    }

    ._sales {
      margin-top: 6px;
      color: #B44634;
      font-size: 24px;
      display: flex;
      align-items: center;
      ._line{
        display: inline-block;
        width: 2px;
        height: 24px;
        background: #8E8E8E;
        margin: 0 8px;
      }
    }
    ._discount{
      display: flex; align-items: center; padding: 18px 0 0 0; font-size: $uni-font-size-sm;
      ._title{
        flex: 1; text-align: left; align-items: center; height: 40px; overflow: hidden;
        ._tips{
          display: inline-block;
          color: $uni-color-primary;
          background: #FFEAE9;
          text-align: center;
          padding: 0 8px;
          line-height: 40px;
          border-radius: 4px;
          margin-right: 8px;
          font-size: 24px;
        }
      }
    }

    ._goods-price {
      margin-top: 24px;
      //font-size: 24px;
      //color: $uni-color-primary;
      //display: flex;
      //align-items: baseline;
      //._blod {
      //  font-size: 36px;
      //  font-weight: bold;
      //}
      //
      //._decoration {
      //  text-decoration: line-through;
      //  color: #999999;
      //  margin-left: 6px;
      //}
      ._text{
        color: #DE3A2E;
        font-size: 24px;
        margin-right: 4px;
      }
    }
  }
}

</style>
